import React, { useState, useEffect } from 'react';
import APIClient from '../api/client';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faTrash, faEdit, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';

const client = new APIClient();

const SessionManager = () => {
    const [sessions, setSessions] = useState([]);
    const [currentSessionId, setCurrentSessionId] = useState(localStorage.getItem('chat_session_id'));
    const [newSessionName, setNewSessionName] = useState('');
    const [newSessionDescription, setNewSessionDescription] = useState('');
    const [editingSessionId, setEditingSessionId] = useState(null);
    const [editName, setEditName] = useState('');
    const [editDescription, setEditDescription] = useState('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [successMessage, setSuccessMessage] = useState('');

    useEffect(() => {
        // 加载会话列表
        loadSessions();
        
        // 监听会话ID变化
        const storedSessionId = localStorage.getItem('chat_session_id');
        if (storedSessionId !== currentSessionId) {
            setCurrentSessionId(storedSessionId);
        }
    }, [currentSessionId]);

    // 加载会话列表
    const loadSessions = async () => {
        try {
            setLoading(true);
            setError(null);
            
            // 这里需要实现获取会话列表的API
            // 假设我们有一个API可以获取所有会话
            // const response = await client.getSessions();
            // setSessions(response.sessions);
            
            // 由于没有实际的会话列表API，我们模拟一个
            const mockSessions = [
                {
                    id: currentSessionId,
                    name: '智能助手',
                    description: '一个可以回答各种问题并提供帮助的AI助手',
                    created_at: new Date().toISOString(),
                    document_count: 0
                }
            ];
            
            setSessions(mockSessions);
        } catch (error) {
            setError(error.message);
            console.error('加载会话列表失败:', error);
        } finally {
            setLoading(false);
        }
    };

    // 创建新会话
    const createSession = async () => {
        if (!newSessionName.trim()) {
            setError('会话名称不能为空');
            return;
        }
        
        try {
            setLoading(true);
            setError(null);
            setSuccessMessage('');
            
            const response = await client.createSession(
                newSessionName,
                newSessionDescription,
                'gpt-3.5-turbo',
                0.7
            );
            
            setCurrentSessionId(response.session_id);
            localStorage.setItem('chat_session_id', response.session_id);
            setNewSessionName('');
            setNewSessionDescription('');
            setSuccessMessage('会话创建成功');
            
            // 重新加载会话列表
            loadSessions();
        } catch (error) {
            setError(error.message);
            console.error('创建会话失败:', error);
        } finally {
            setLoading(false);
        }
    };

    // 切换会话
    const switchSession = async (sessionId) => {
        if (sessionId === currentSessionId) return;
        
        try {
            setLoading(true);
            setError(null);
            
            // 设置当前会话ID
            setCurrentSessionId(sessionId);
            localStorage.setItem('chat_session_id', sessionId);
            
            // 通知用户
            setSuccessMessage('已切换会话');
            
            // 重新加载会话列表
            loadSessions();
        } catch (error) {
            setError(error.message);
            console.error('切换会话失败:', error);
        } finally {
            setLoading(false);
        }
    };

    // 删除会话
    const deleteSession = async (sessionId) => {
        if (!sessionId) return;
        
        if (window.confirm('确定要删除此会话吗？这将清除所有相关数据。')) {
            try {
                setLoading(true);
                setError(null);
                
                // 如果删除当前会话，先切换到其他会话
                if (sessionId === currentSessionId) {
                    const otherSession = sessions.find(s => s.id !== sessionId);
                    if (otherSession) {
                        await switchSession(otherSession.id);
                    }
                }
                
                // 删除会话
                await client.deleteSession(sessionId);
                
                // 更新会话列表
                setSessions(prev => prev.filter(s => s.id !== sessionId));
                setSuccessMessage('会话已删除');
            } catch (error) {
                setError(error.message);
                console.error('删除会话失败:', error);
            } finally {
                setLoading(false);
            }
        }
    };

    // 开始编辑会话
    const startEditing = (session) => {
        setEditingSessionId(session.id);
        setEditName(session.name);
        setEditDescription(session.description);
    };

    // 取消编辑
    const cancelEditing = () => {
        setEditingSessionId(null);
        setEditName('');
        setEditDescription('');
    };

    // 保存编辑
    const saveEditing = async () => {
        if (!editName.trim()) {
            setError('会话名称不能为空');
            return;
        }
        
        try {
            setLoading(true);
            setError(null);
            setSuccessMessage('');
            
            // 这里需要实现更新会话的API
            // 假设我们有一个API可以更新会话信息
            // await client.updateSession(editingSessionId, editName, editDescription);
            
            // 由于没有实际的更新会话API，我们模拟更新
            setSessions(prev => 
                prev.map(s => 
                    s.id === editingSessionId 
                        ? {...s, name: editName, description: editDescription} 
                        : s
                )
            );
            
            setEditingSessionId(null);
            setEditName('');
            setEditDescription('');
            setSuccessMessage('会话信息已更新');
        } catch (error) {
            setError(error.message);
            console.error('更新会话失败:', error);
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="session-manager">
            <h2>会话管理</h2>
            
            {error && (
                <div className="alert alert-danger">{error}</div>
            )}
            
            {successMessage && (
                <div className="alert alert-success">{successMessage}</div>
            )}
            
            {/* 创建新会话表单 */}
            <div className="new-session-form">
                <h3>创建新会话</h3>
                <div className="form-group">
                    <label>会话名称</label>
                    <input
                        type="text"
                        value={newSessionName}
                        onChange={(e) => setNewSessionName(e.target.value)}
                        placeholder="输入会话名称"
                        disabled={loading}
                    />
                </div>
                <div className="form-group">
                    <label>会话描述</label>
                    <textarea
                        value={newSessionDescription}
                        onChange={(e) => setNewSessionDescription(e.target.value)}
                        placeholder="输入会话描述（可选）"
                        disabled={loading}
                    />
                </div>
                <div className="form-actions">
                    <button
                        className="btn btn-primary"
                        onClick={createSession}
                        disabled={loading || !newSessionName.trim()}
                    >
                        <FontAwesomeIcon icon={faPlus} /> 创建会话
                    </button>
                </div>
            </div>
            
            {/* 会话列表 */}
            <div className="session-list">
                <h3>我的会话</h3>
                {loading && (
                    <div className="loading-indicator">
                        <FontAwesomeIcon icon={faSpinner} spin /> 加载中...
                    </div>
                )}
                
                {sessions.length === 0 && !loading && (
                    <div className="empty-state">
                        <p>暂无会话，请创建一个新会话。</p>
                    </div>
                )}
                
                {sessions.map(session => (
                    <div 
                        key={session.id}
                        className={`session-item ${session.id === currentSessionId ? 'active' : ''}`}
                    >
                        {editingSessionId === session.id ? (
                            // 编辑模式
                            <div className="session-edit-form">
                                <div className="form-group">
                                    <input
                                        type="text"
                                        value={editName}
                                        onChange={(e) => setEditName(e.target.value)}
                                        placeholder="输入会话名称"
                                    />
                                </div>
                                <div className="form-group">
                                    <textarea
                                        value={editDescription}
                                        onChange={(e) => setEditDescription(e.target.value)}
                                        placeholder="输入会话描述"
                                    />
                                </div>
                                <div className="form-actions">
                                    <button className="btn btn-success" onClick={saveEditing}>
                                        <FontAwesomeIcon icon={faCheck} /> 保存
                                    </button>
                                    <button className="btn btn-danger" onClick={cancelEditing}>
                                        <FontAwesomeIcon icon={faTimes} /> 取消
                                    </button>
                                </div>
                            </div>
                        ) : (
                            // 查看模式
                            <div className="session-details">
                                <div className="session-header">
                                    <h4>
                                        {session.id === currentSessionId && <span className="badge badge-primary">当前</span>}
                                        {session.name}
                                    </h4>
                                    <div className="session-actions">
                                        <button 
                                            className="action-button" 
                                            title="编辑" 
                                            onClick={() => startEditing(session)}
                                        >
                                            <FontAwesomeIcon icon={faEdit} />
                                        </button>
                                        <button 
                                            className="action-button" 
                                            title="删除" 
                                            onClick={() => deleteSession(session.id)}
                                        >
                                            <FontAwesomeIcon icon={faTrash} />
                                        </button>
                                    </div>
                                </div>
                                <div className="session-meta">
                                    <div className="session-description">
                                        {session.description || '无描述'}
                                    </div>
                                    <div className="session-info">
                                        <span>创建于: {new Date(session.created_at).toLocaleDateString()}</span>
                                        <span>•</span>
                                        <span>文档数: {session.document_count}</span>
                                    </div>
                                </div>
                                <button
                                    className="btn btn-outline-primary switch-btn"
                                    onClick={() => switchSession(session.id)}
                                    disabled={session.id === currentSessionId || loading}
                                >
                                    切换到会话
                                </button>
                            </div>
                        )}
                    </div>
                ))}
            </div>
        </div>
    );
};

export default SessionManager;    